<!--78d2c8a55b62cb049653ace920a563dc-->
<!--amap://styles/1cb196e91d9c8143886b9d2c68eff8d0-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>成都市最新报警信息</title>
    <link rel="stylesheet" href="index1.css">
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #up-map-div{
            width:330px;
            height:260px;
            top:210px;
            right:0px;
            position:absolute;
            z-index:9999;
            border:1px solid blue;
            /*background-color:#FFFFFF;*/
        }
    </style>
</head>
<body>
<div id="container" >
    <h2 style="position: absolute;z-index:9999; left: 650px;margin-top: 50px;color: white;font-size: 30px">成都市最新报警信息</h2>
    <div id="up-map-div" style="filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;background-color: #0c0c0c">
        <div class="center" >
            <div class="title" style="font-size: medium;left: 95px" >最新报警信息</div>
            <div class="echart wenzi"  >
                <div class="gun">
                    <span style="font-size: 13px">报警编号</span>
                    <span style="font-size: 13px">报警站点</span>
                    <span style="font-size: 13px">报警信息</span>
                </div>
                <div id="FontScroll" class="myscroll" style="margin-top: -10px">
                    <ul>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                                <span>犀浦站</span>
                                <span>拥堵报警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                <span>龙泉站</span>
                                <span>火灾报警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                <span>中医大省医院站</span>
                                <span>故障检修</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                                <span>地铁线路2</span>
                                <span>高温预警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                                <span>A类地铁</span>
                                <span>紧急事件</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>6</b>
                                    </span>
                                <span>B型地铁</span>
                                <span>非正常停靠</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>7</b>
                                    </span>
                                <span>有轨电车</span>
                                <span>交通事故堵塞</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>8</b>
                                    </span>
                                <span>宽窄巷子站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>9</b>
                                    </span>
                                <span>太古里站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>10</b>
                                    </span>
                                <span>动物园站</span>
                                <span>医疗事故</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>11</b>
                                    </span>
                                <span>东升站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>12</b>
                                    </span>
                                <span>天府广场站</span>
                                <span>高温处理</span>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="zuobiao.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
    AMapLoader.load({ //首次调用 load
        key:'78d2c8a55b62cb049653ace920a563dc',//首次load key为必填
        version:'1.4.15',
        Loca:{
            version: '1.3.2',
        }
    }).then((AMap)=>{
        map = new AMap.Map('container',{
            mapStyle: 'amap://styles/1cb196e91d9c8143886b9d2c68eff8d0',
            zoom: 12,
        });

        var layer = new Loca.PointLayer({
            map: map,
        });

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });
        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 6,
                // 填充颜色
                color: '#ffe600',
                // 描边颜色
                borderColor:"#ffe600",
                // 描边宽度，单位像素
                borderWidth: 10,
                // 透明度 [0-1]
                opacity: 0.7,
            }
        });
        layer.render();
    }).catch((e)=>{
        console.log(e);
    });

</script>
<script src="fontscroll.js"></script>

</body>
</html>